<script setup>
import {usePathNavigationStore} from "@/stores/pathNavigation.js";
import {useFileListStore} from "@/stores/fileListStore.js";
import {useRightMenuStore} from "@/stores/rightMenu.js";

const store = useFileListStore()
let rightMenuStore = useRightMenuStore();
function click(index) {
  rightMenuStore.openDirectory(store.curPathArr.slice(0,index + 1).join("\\"),true)
}
function root() {
  rightMenuStore.openDirectory("",true)
}
</script>

<template>
  <el-breadcrumb class="navigation" separator=">">
    <el-breadcrumb-item @click="root()" v-if="store.curPathArr.length > 0"><span class="span">根目录</span></el-breadcrumb-item>
    <el-breadcrumb-item @click="click(index)" v-for="(item,index) in store.curPathArr"><span class="span">{{item.endsWith("\\") ? item.replace("\\","") : item}}</span></el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped>
.span {
  cursor: pointer;
  user-select: none;
}

.navigation {
  user-select: none;
}
</style>